<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}气象数据可视化平台{% endblock %}</title>
    <script src="/static/echart/echarts.min.js"></script>
    <script src="/static/echart/bmap.min.js"></script>
    <script src="/static/jquery/jquery-3.6.0.min.js"></script>
    <script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/static/fontawesome-6.4.0/css/all.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <style>
        .content-wrapper {
            width: 100%;
            max-width: 1920px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        @media (min-width: 1400px) {
            .container {
                max-width: 1320px;
            }
        }
        
        @media (min-width: 1600px) {
            .container {
                max-width: 1520px;
            }
        }
        
        @media (min-width: 1920px) {
            .container {
                max-width: 1820px;
            }
        }
        
        .flex-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }
        
        .flex-grid > * {
            flex: 1 1 300px;
        }
        
        .card {
            height: 100%;
            transition: transform 0.2s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex: 1 0 auto;
            padding-top: 60px;
        }
        
        footer {
            flex-shrink: 0;
        }
    </style>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ url_for('favicon') }}?v={{ now().timestamp() }}">
    <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('favicon') }}?v={{ now().timestamp() }}">

    {% block extra_head %}{% endblock %}
</head>
<body data-theme="{{ current_user.theme if current_user.is_authenticated and current_user.theme else 'light' }}">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="fas fa-chart-line me-2"></i>气象数据可视化分析平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link {% if request.endpoint == 'data_view' %}active{% endif %}" href="{{ url_for('data_view') }}">
                            <i class="fas fa-database me-1"></i> 天气数据
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.endpoint == 'prediction_view' %}active{% endif %}" href="{{ url_for('prediction_view') }}">
                            <i class="fas fa-chart-pie me-1"></i> 天气预测
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.endpoint == 'feedback' %}active{% endif %}" href="{{ url_for('feedback') }}">
                            <i class="fas fa-comments me-1"></i> 信息反馈
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.endpoint == 'china_map' %}active{% endif %}" href="{{ url_for('china_map') }}">
                            <i class="fas fa-map me-1"></i> 全国视图
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.endpoint == 'analysis_view' %}active{% endif %}" href="{{ url_for('analysis_view') }}"><i class="fas fa-chart-line me-1"></i>数据分析</a>
                    </li>
                    {% if current_user.is_authenticated %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-user-circle me-1"></i>{{ current_user.username }}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="{{ url_for('profile') }}"><i class="fas fa-user me-1"></i> 个人主页</a></li>
                                <li><a class="dropdown-item" href="{{ url_for('profile_settings') }}"><i class="fas fa-cog me-1"></i> 账号设置</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt me-1"></i> 退出登录</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('login') }}"><i class="fas fa-user me-1"></i> 登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('register') }}"><i class="fas fa-user-plus me-1"></i> 注册</a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- 悬浮提示信息容器 -->
    <div id="alertsContainer" class="fixed-alerts">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>

    <!-- 主要内容区域 -->
    <main>
        <div class="content-wrapper">
            {% block content %}{% endblock %}
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="mt-5 py-3 bg-light text-center">
        <div class="container">
            <p class="mb-0">&copy; 2025 天气数据可视化系统 | 版本 1.1.5</p>
        </div>
    </footer>

    {% block scripts %}{% endblock %}
</body>
</html>